<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

	<title>我的积分</title>

	<link href="./AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
	<link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
	<link href="./css/personal.css" rel="stylesheet" type="text/css">
	<script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
	<!--自定义工具(登录之后展示用户名使用)-->
	<script src="js/Data.js"></script>

	<!--自定义工具-->
	<script src="js/HttpUtil.js"></script>
	<!--导入vue 包-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<!-- 引入样式 element-ui-->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 element-ui-->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>
<!--头 -->
<header>
	<article>
		<div class="mt-logo">
			<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div class="menu-hd" id="AA">
							<a href="login.html" id="a1" target="_top" class="h">亲，请登录</a>
							<a href="register.html" id="a2" target="_top">免费注册</a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="home2.html" target="_top" class="h">商城首页</a></div>
					</div>
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd"><a id="mc-menu-hd" href="myShopCart.html" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
					</div>
					<div class="topMessage favorite">
						<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
				</ul>
			</div>

			<!--悬浮搜索框-->

			<div class="nav white">
				<div class="logoBig">
					<li><img src="./images/logobig.png" /></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>
		</div>
		</div>
	</article>
</header>

<div class="nav-table">
	<div class="long-title"><span class="all-goods">全部分类</span></div>
	<div class="nav-cont">
		<ul>
			<li class="index"><a href="#">首页</a></li>
			<li class="qc"><a href="#">闪购</a></li>
			<li class="qc"><a href="#">限时抢</a></li>
			<li class="qc"><a href="#">团购</a></li>
			<li class="qc last"><a href="#">大包装</a></li>
		</ul>
		<div class="nav-extra">
			<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
			<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
		</div>
	</div>
</div>
<b class="line"></b>

<div class="center">
	<div class="col-main">
		<div class="main-wrap">
			<div class="points" id="points_vue">
				<!--标题 -->
				<div class="am-cf am-padding">
					<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">我的积分</strong> / <small>My&nbsp;Point</small></div>
				</div>
				<hr/>
				<div class="pointsTitle">
					<div class="usable">可用积分<span>{{pointsAvailable}}</span></div>
					<div class="signIn"><a href="sign"><i class="am-icon-calendar"></i>每日签到</a></div>
				</div>
				<div class="pointshop"><a href="#"><i><img src="./images/u5.png" /></i>积分商城</a></div>
				<div class="pointlist" style="padding: 0px 10px;">
					<div class="pointTitle">
						<span>积分明细</span>
						<span class="more"><a href="points.html">查看更多<i class="am-icon-angle-right"></i></a></span>
					</div>
					<table>
						<tbody>
						<tr>
							<td class="pointType">订单号7745926347132商品评论</td>
							<td class="pointNum">+2</td>
							<td class="pointTime">2021-01-27&nbsp09:32</td>
						</tr>
						<tr>
							<td class="pointType">每日签到</td>
							<td class="pointNum">+5</td>
							<td class="pointTime">2021-01-26&nbsp07:32</td>
						</tr>
						<tr>
							<td class="pointType">每日签到</td>
							<td class="pointNum">+5</td>
							<td class="pointTime">2021-01-27&nbsp11:24</td>
						</tr>
						<tr>
							<td class="pointType">邮箱验证</td>
							<td class="pointNum">+50</td>
							<td class="pointTime">2021-01-27&nbsp16:18</td>
						</tr>
						<tr>
							<td class="pointType">手机绑定</td>
							<td class="pointNum">+100</td>
							<td class="pointTime">2021-01-28&nbsp19:27</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!--底部-->
		<div class="footer">
			<div class="footer-hd">
				<p>
					<b>|</b>
					<a href="home2.html ">商城首页</a>
					<b>|</b>
					<a href="# ">支付宝</a>
					<b>|</b>
					<a href="# ">物流</a>
				</p>
			</div>
			<div class="footer-bd ">
				<p>
					<a href="# ">合作伙伴</a>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
				</p>
			</div>
		</div>
	</div>

	<aside class="menu">
		<ul>
			<li class="person active">
				<a href="information.html"><i class="am-icon-user"></i>个人中心</a>
			</li>
			<li class="person">
				<p><i class="am-icon-newspaper-o"></i>个人资料</p>
				<ul>
					<li> <a href="./information.html">个人信息</a></li>
					<li> <a href="safety.html">安全设置</a></li>
					<li> <a href="address.html">地址管理</a></li>
					<li> <a href="cardlist.html">快捷支付</a></li>
				</ul>
			</li>
			<li class="person">
				<p><i class="am-icon-balance-scale"></i>我的交易</p>
				<ul>
					<li><a href="order.html">订单管理</a></li>
					<li> <a href="change.html">退款售后</a></li>
					<li> <a href="comment.html">评价商品</a></li>
				</ul>
			</li>
			<li class="person">
				<p><i class="am-icon-dollar"></i>我的资产</p>
				<ul>
					<li> <a href="points.html">我的积分</a></li>
					<li> <a href="coupon.html">优惠券 </a></li>
					<li> <a href="bonus.html">红包</a></li>
					<li> <a href="walletlist.html">账户余额</a></li>
					<li> <a href="bill.html">账单明细</a></li>
				</ul>
			</li>

			<li class="person">
				<p><i class="am-icon-tags"></i>我的收藏</p>
				<ul>
					<li> <a href="collection.html">收藏</a></li>
					<li> <a href="foot.html">足迹</a></li>
				</ul>
			</li>

			<li class="person">
				<p><i class="am-icon-qq"></i>在线客服</p>
				<ul>
					<li> <a href="consultation.html">商品咨询</a></li>
					<li> <a href="suggest.html">意见反馈</a></li>

					<li> <a href="news.html">我的消息</a></li>
				</ul>
			</li>
		</ul>

	</aside>
</div>

</body>

</html>

<script charset="gb2312" type="text/javascript" language="JavaScript">

	$(function () {
		OnDisplay();
	});


	const vue = new Vue({
		el: '#points_vue',
		data: {
			id:sessionStorage.id,

			pointsAvailable:"",
			signStatus: "",
			updateTime:"",
		},


		methods: {

			refresh:function (id) {
				let url = "points/flash";
				let param = {id:sessionStorage.id};
				let thisObject = this;
				console.log("id："+id)
				getWithParams(url,param,function (data) {
					thisObject.pointsAvailable = data.pointsAvailable
					console.log("pointsAvailable："+thisObject.pointsAvailable)
				})
			}

		},

		mounted: function () {
			//页面加载完成，并且vue对象加载完成之后调用
			this.refresh(sessionStorage.id);
		},
	});


</script>